<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width:200px;
            height:200px;
            background-color: red;
            position: absolute;
        }
        #box2{
            width:200px;
            height:200px;
            position: absolute;
        }
        .box2{
            border:3px dotted lightslategray;
        }
    </style>
</head>
<body>
<div id="box1">

</div>
<div id="box2">

</div>
<script>
    class Dorp{
        constructor(box1,doc,box2){
            this.box1 = document.querySelector(box1);
            this.box2 = document.querySelector(box2);
            this.doc = doc;
        }
        show(){
            var oDiv = this.box1;
            var doc = this.doc;
            var oDiv1 = this.box2;
            this.box2.onmousedown = function (ev) {
                console.log(this)
                var ev = ev||ev.event;
                var x = ev.clientX-this.offsetLeft;
                this.className = "box2";
                console.log(x)
                var y = ev.clientY-this.offsetTop;
                doc.onmousemove = function(ev){
                    var ev1 = ev||ev.event;
                    oDiv1.style.left = ev1.clientX - x+"px";
                    oDiv1.style.top = ev1.clientY-y+"px";
                }
                doc.onmouseup = function () {
                    console.log(oDiv1.offsetLeft);
                    oDiv1.className = "";
                    oDiv.style.left = oDiv1.offsetLeft+"px";
                    oDiv.style.top = oDiv1.offsetTop+"px";
                    document.onmousemove = null;
                }
                return false;
            }
        }
    }

    window.onload =function () {
        var p1 = new Dorp("#box1",document,"#box2")
        p1.show();
    }
</script>
</body>
</html>